<template>
  <div>
    <div v-show="!isShowUserProtocol">
      <jxf-titletip :title="title"  @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchForm" @submit.native.prevent>
          <el-form-item label="协议名称:" prop="agrname">
            <el-input v-model.trim="searchInfo.agrname" clearable @keyup.enter.native="onSearch" ref="input-agrname"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="addUserProtocol('watch')">添加协议</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="isShow" slot-scope="userProtocol">
            <div>{{userProtocol.row.isShow == 0 ? "否" : '是'}}</div>
          </template>
          <template slot="operation" slot-scope="userProtocol">
            <el-button type="text" @click="addUserProtocol('edit')">编辑</el-button>
            <el-button type="text" @click="deleteItem()">删除</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <AddUserProtocol v-if="isShowUserProtocol" :isShowUserProtocol.sync="isShowUserProtocol" :title="userProtocolTitle" :userProtocolInfo="userProtocolInfo" @fresh="fresh" @clearInfo="clearInfo"></AddUserProtocol>
  </div>
</template>

<script>
  import AddUserProtocol from './components/AddUserProtocol'
    export default {
        name: "UserProtocol",
        components: { AddUserProtocol },
        data() {
          return {
            title: "用户协议",
            searchInfo: {
              agrname: ""
            },
            isShowUserProtocol: false,
            userProtocolTitle: "",
            userProtocolInfo: {
              agrTemp: "",
              agrname: "",
              isShow: "",
              id: ""
            },
            dataTable: {
              border:true,
              loading:false,
              hasSelect:false,
              hasOperation:false,
              tr: [
                // {
                //   id: '1',
                //   label: '编号',
                //   prop: 'id'
                // },
                {
                  id: '2',
                  label: '协议名称',
                  minWidth: "120",
                  prop: 'agrname'
                },
                {
                  id: '3',
                  label: '时间',
                  minWidth: "120",
                  prop: 'createTime'
                },
                {
                  id: '4',
                  label: '是否展示',
                  show: 'template',
                  minWidth: "120",
                  prop: 'isShow'
                },
                {
                  id: '8',
                  label: '操作',
                  show: 'template',
                  width :"120",
                  prop: 'operation'
                }
              ],
              operation: [],
              data: []
            },
            pageTotal:40,
            pageSize:10,
            currentPage:2
          }
        },
        methods: {
          // 清空
          clearInfo() {
            this.userProtocolInfo = {
              agrTemp: "",
              agrname: "",
              isShow: "",
              id: ""
            }
          },
          fresh() {
            this.getData()
          },
          refreshFuc() {
            this.resetForm('searchInfo')
            this.pageSize = 10;
            this.currentPage = 1;
            this.getData()
          },
          getData() {
            this.dataTable.loading = true;
            let data = {
              ...this.searchInfo,
              pageNum: this.currentPage,
              pageSize: this.pageSize
            };
            ajax.post(apis.setting.agreementList, data).then(res => {
              if(res.code === "10000000") {
                this.dataTable.data = res.data.dataList;
                this.pageTotal = res.data.total
              } else {
                this.$message.error(res.message)
              }
              this.dataTable.loading = false;
            })
          },
          onSearch() {
            this.currentPage = 1;
            this.getData()
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          deleteItem() {
            this.$confirm('此操作将删除此协议信息, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '取消操作'
              });
            });
          },
          // 添加协议
          addUserProtocol(type) {
            switch (type) {
              case 'watch':
                this.userProtocolTitle = "发布协议";
                break;
              case 'edit':
                this.userProtocolTitle = "编辑协议";
                break;
              default:
                return;
            }
            this.isShowUserProtocol = true
          },
          // 切换页面
          currentPageChange(pageNo) {
            this.currentPage = pageNo
          },
          // 切换页面条数
          pageSizeChange(pageNo) {
            this.pageSize = pageNo
          },
        },
        created() {
          this.onSearch()
        }
    }
</script>

<style lang="scss" scoped>

</style>
